<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body style="padding: 10px;">
<div class="layui-row">
    <div class="layui-input-inline layui-col-md5">
        <input type="text" name="searchInput" class="layui-input" placeholder="...">
    </div>
    <div class="layui-input-inline layui-col-md1" style="width: 60px;">
        <select name="searchType" class="layui-select">
            <option value="1">名称</option>
            <option value="2">代码</option>
            <option value="3">项目</option>
        </select>
    </div>
    <div class="layui-input-inline layui-col-md1">
        <button class="layui-btn" name="search">搜索</button>
    </div>
</div>
<table id="labClauseTable" lay-filter="labClauseTable"></table>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(["jquery", "table", "laytpl", "form"], function () {
        let $ = layui.jquery;
        let table = layui.table;
        let laytpl = layui.laytpl;
        let form = layui.form;

        laytpl.getExamineItemName = function (examineItemId) {
            let examineItemName;
            $.ajax({
                url: "/getExamineItemNameById",
                dataType: "json",
                type: "get",
                data: "examineItemId=" + examineItemId,
                async: false,
                success: function (responseData) {
                    examineItemName = responseData.msg;
                },
                error: function () {
                    console.log("获取examineItemName请求失败！");
                }
            });
            return examineItemName;
        };

        let labClauseTable = table.render({
            elem: "#labClauseTable",
            id: "labClauseTableId",
            url: "/getLabExamineClauses",
            page: false,
            method: "post",
            size: "sm",
            toolbar: true,
            toolbar: "#toobarTemplet", //表格头部工具栏模板
            response: {
                countName: "totalCount",
                dataName: "data",
                msgName: "msg",
            },
            where: {
                examineItemId: getQueryString("examineItemId")
            },
            request: {
                pageName: "currentPageNum",
                limitName: "pageSize",
            },
            cols: [
                [
                    {type: "checkbox", fixed: "left", align: "center"},
                    {field: "id", hide: true},
                    {field: "numericalOrder", title: "序号", width: 60, align: "center"},
                    {field: "codeName", title: "代码", width: 150, align: "center"},
                    {field: "clauseName", title: "名称", width: 150, align: "center"},
                    {field: "examineItemId", title: "所属项目", width: 160, align: "center", templet: "#itemTple"},
                    {field: "referenceValue", title: "参考值", width: 150, align: "center"},
                    {field: "units", title: "单位", width: 150, align: "center"},
                    {title: "操作", fixed: "right", templet: "#operateTemplete", align: "center"}
                ]
            ]
        });

        table.on("toolbar(labClauseTable)", function (obj) {

            switch (obj.event) {
                case "batchDelete":
                    batchDelete();
                    break;
                case "addLabClause":
                    addLabClause();
                    break;
            }
            ;
        })

        function batchDelete() {
            layer.msg("批量删除");
        }

        function addLabClause() {
            layer.open({
                title: "添加条目",
                type: 2,
                maxmin: true,                //最大化最小化
                shade: 0.5,
                anim: 0,                     //弹出动画
                area: ["90%", "90%"],
                content: "/addLabExamineClause?examineItemId="+getQueryString("examineItemId"),
                zIndex: layer.zIndex,
                success: null,
                end: function () {
                    labClauseTable.reload();
                },
            });
        }

        table.on("tool(labClauseTable)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
                    break;
                case "deleteClause":
                    deleteClause(data);
                    break;
            }
        });

        function edit(data) {
            layer.msg("编辑" + data.clauseName);
        }

        function deleteClause(data) {
            layer.confirm("确定要删除项目‘<span style='color:red'>" + data.clauseName + "’</span>吗？",
                {
                    title: "提示",
                    icon: 3,
                    btnAlign: 'c',
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        $.ajax({
                            url: "/deleteLabClauseById",
                            data: "id=" + data.id,
                            dataType: "json",
                            type: "post",
                            success: function (responseResult) {
                                let iconNum;
                                if (responseResult.code == 1) {
                                    iconNum = 1;
                                } else {
                                    iconNum = 2;
                                }
                                layer.msg(responseResult.msg, {
                                    time: 1500,
                                    icon: iconNum,
                                });
                                labClauseTable.reload();
                            },
                            error: function () {
                                layer.msg("服务器错误！", {
                                    icon: 2,
                                    time: 1500,
                                });
                            }
                        });
                    },
                });

        }

        $("button[name=search]").on("click", function(){
           let searchInput=$("input[name=searchInput]").val();
           let searchType=$("select[name=searchType]").val();
           console.log(searchType+"\t"+searchInput);
           table.reload("labClauseTableId", {
               url: "/fuzzySearchLabClause",
               page: {
                   curr: 1
               },
               page: false,
               where: {
                   searchInput: searchInput,
                   searchType: searchType,
                   examineItemId: getQueryString("examineItemId")
               },
               method: "post"
           });

        });

        //获取父页面传递的参数
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r !== null)
                return unescape(r[2]);
            return null;
        };


    });
</script>
<script type="text/html" id="toobarTemplet">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="addLabClause">添加条目</button>
    </div>
</script>
<script type="text/html" id="operateTemplete">
    <div class="layui-btn-container">
        <span class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"
              style="padding-right: 5px;margin-right: 5px">编辑</span>
        <span class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteClause"
              style="padding-right: 5px;margin-right: 5px">删除</span>
    </div>
</script>
<script type="text/html" id="itemTple">
    <span>{{ layui.laytpl.getExamineItemName(d.examineItemId) }}</span>
</script>
</body>
</html>